<template>
	<div>
		<input type="checkBox" ref="check" v-model="checkval" :disabled="disabled" @click="clickCheck">{{label}}
	</div>	
</template>

<script>	
	export default {
	name: "dmCheckBox",
	components:{		
	},
	model: {
    	prop: 'val',
    	event: 'clickCheck'
  	},
	props:{
		val:{default:null},//值        
        disabled:{default:null},    
        label:{default:null}//标签
	},
	watch:{
      // 反向选择：监听value，当value因外界修改发生改变时选中自动选中option
      val: function(newValue){       	
      	this.checkval = newValue;
      }
    },
    data() {
      return {       	
      	checkval:null,      	
      	currentRow:null,
      };
    },
    mounted(){     	
    	this.checkval = this.val;
    	if(this.checkval){   			
			this.$refs.check.setAttribute("checked","checked");				
		}else{    			
			this.$refs.check.removeAttribute("checked");
		} 
    },
    methods: {     	
    	clickCheck(e){     		
    		if(this.checkval==null || this.checkval== false || this.checkval== 'false'){    			
    			this.$refs.check.setAttribute("checked","checked");	
    			this.$emit('change',true);     	
    			this.checkval = true;
    		}else{    			
    			this.$refs.check.removeAttribute("checked");
    			this.$emit('change',false);   
    			this.checkval = false;
    		}    		
    	},    	
    	
    }
  }
</script>

<style scoped>
	input[type=checkbox]::after{
	    /*position: absolute;
	    top: 0;
	    background-color: red;
	    color: #000;
	    width: 15px;
	    height: 15px;
	    display: inline-block;
	    visibility: visible;
	    padding-left: 0px;
	    text-align: center;
	    content: ' ';
	    border-radius: 3px;	   */
	}
	
	input[type=checkbox]:checked::after{
	    /*content: "✓";	    
	    font-size: 12px;
	    font-weight: bold;*/
	}
	
</style>